<template>
  <el-aside id="aside">
    <ul class="a-ul" id="asideList">
      <li v-for="(item, index) of list" :key="index" class="uli" @click="show">
        <router-link :to="item.path" class="ula">
          <img :src="item.img" alt="" />
          <p class="name">{{ item.name }}</p>
          <span class="ulspan"></span>
        </router-link>
        <ol v-if="item.children" :key="index">
          <li class="oli" v-for="(items, idx) in item.children" :key="idx">
            <router-link :to="items.path" class="oa">{{ items.name }}</router-link>
          </li>
        </ol>
      </li>
    </ul>
  </el-aside>
</template>
<script>
import $ from 'jquery'
import { mapState } from 'vuex'
export default {
  data() {
    return {
      list: [
        {
          id: 0,
          name: '首页',
          path: '/console/consoleHome',
          img: require('@/assets/images/console/home.png')
        },
        {
          id: 1,
          name: '我的应用',
          path: '/console/apply',
          img: require('@/assets/images/console/apply.png')
        },
        {
          id: 2,
          name: '用户管理',
          path: '/console/user',
          img: require('@/assets/images/console/user.png'),
          children: [
            {
              id: 21,
              name: '个人用户',
              path: '/console/user/mine'
            },
            {
              id: 22,
              name: '企业用户',
              path: '/console/user/firm'
            }
          ]
        },
        {
          id: 3,
          name: '印章管理',
          path: '/console/seal',
          img: require('@/assets/images/console/seal.png')
        },
        {
          id: 4,
          name: '模板管理',
          path: '/console/template',
          img: require('@/assets/images/console/template.png')
        },
        {
          id: 5,
          name: '签署管理',
          path: '/console/sign',
          img: require('@/assets/images/console/gongjuxiang-gangbi.png')
        },
        {
          id: 6,
          name: '验签管理',
          path: '/console/checking',
          img: require('@/assets/images/console/checking.png')
        },
        {
          id: 7,
          name: '合同管理',
          path: '/console/contract',
          img: require('@/assets/images/console/contract.png')
        }
      ],
      showChild: false
    }
  },
  methods: {
    show(res) {
      console.log($(res.path[1]))
      // 点击当前li如果当前li有ol的话 让ol出现,对应的让其父元素的ol隐藏
      $(res.path[1])
        .parent('li')
        .siblings()
        .children('ol')
        .hide()
      $(res.path[1])
        .next()
        .slideDown()
    }
  },
  mounted() {
    if (this.company.has_auth == '2') {
      $('.uli:first').show()
    } else {
      console.log(333322)
      $('.uli:first')
        .siblings()
        .hide()
    }
  },
  computed: {
    ...mapState({
      company: modules => modules.login.company
    })
  }
}
</script>
<style scoped lang="scss">
#aside {
  .a-ul {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    text-align: center;
    .uli {
      width: 100%;
      margin: 0 auto;
      box-sizing: border-box;
      line-height: 50px;
      img {
        margin-right: 30px;
      }
      .name {
        width: 120px;
        text-align: left;
        display: inline-block;
      }
      .ula {
        position: relative;
        display: block;
        width: 100%;
        height: 50px;
        font-size: 18px;
        color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        .ulspan {
          display: block;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
      .router-link-active {
        background: rgba(35, 183, 105, 0.2);
        span {
          width: 6px;
          height: 50px;
          background: rgba(35, 183, 105, 1);
          border-radius: 100px 0px 0px 100px;
        }
      }
      ol {
        display: none;
        transition: all 0.1s ease 0;
        .oli {
          margin-top: 2px;
          width: 100%;
          text-align: center;
          .oa {
            display: block;
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 16px;
            color: rgba(35, 183, 105, 1);
            letter-spacing: 1px;
          }
        }
      }
    }
  }
}
</style>
